<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest Standings - Online Judge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content" >
        <div class="content-no-sidebar">
            <div class="data-title" style="width: 100%;position: relative;text-align: center;">
                <h3 th:text="${contest.title}"></h3>
                <div id="contest_status" class="">
                    <span class="ended" th:if="${contest.status == 'ENDED'}">Final Standings</span>
                    <span class="running" th:if="${contest.status == 'RUNNING'}">Contest Running</span>
                    <span class="pending" th:if="${contest.status == 'PENDING'}">Contest Pending</span>
                    <br/><span id="clock" th:text="${contest.leftTime}" style="color:grey"></span>
                    <script language="javascript">
                        var str = $("#clock").text();
                        var n = str.split(":");
                        var time = parseInt(n[0]) * 3600 + parseInt(n[1]) * 60 + parseInt(n[2]);
                        function clock() {
                            if (time > 0) {
                                $("#clock").html(OnlineJudge.formatSeconds(time));
                                time--;
                                if (time == 0) {
                                    $("#contest_status").html("Contest Ended");
                                    $("#contest_status").attr('class', 'ended');
                                }
                                setTimeout(clock, 1000);
                            } else {
                                $("#clock").html("");
                            }
                        }
                        $(document).ready(function(){
                            clock();
                        })
                    </script>
                </div>
            </div>
            <div class="">
                <div class="roundbox-title">
                    <div class="left"></div>
                    <div class="right"><span style="font-size:12px;font-weight: normal;color:grey;">[[#{contestcellnote}]]</span></div>
                </div>
                <div class="" style="">
                    <table class="standings">
                        <tr class="header">
                            <th  class="rank left-item">#</th>
                            <th  class="coder">[[#{author}]]</th>
                            <th  class="solved2" th:if="${contest.type==0}">=</th>
                            <th  class="score" th:if="${contest.type==1}">[[#{score}]]</th>
                            <th  class="penalty" >[[#{penalty}]]</th>
                            <th class="problem" th:each="problem: ${problems}">
                                <span>
                                    <a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}"
                                       th:title="${problem.num} + '-' + ${problem.title}"
                                       th:text="${problem.num}"></a>
                                </span>
                                <br th:if="${contest.type==1}">
                                <span style="font-weight: normal;font-size: 10px" th:if="${contest.type==1}" th:text="${problem.point} + 'pt'">pt</span>
                            </th>
                        </tr>
                        <tr th:if="${pageInfo.size == 0}"><td class="left-item dark" colspan="32" style="text-align: left;">[[#{no-record}]]</td></tr>
                        <tr th:each="attend,stat : ${pageInfo.list}" th:username="${attend.username}" th:class="${stat.even}?'dark'">
                            <td class="rank left-item" th:text="${attend.rank}"></td>
                            <td class="coder view-submit-log" th:contestId="${contest.contest_id}">
                                <div style="float:left;">
                                    <img class="mini-avatar" th:src="${attend.user.avatar}"/>
                                    <b><a th:href="'/profile/'+ ${attend.username}" target="_blank" th:class="'user-rate-'+${attend.user.rate} + ' user-tip'" th:user="${attend.username}" th:text="${attend.username}"></a></b>
                                </div>
                                <div class="nickname">
                                    <span th:title="${attend.user.school}" th:text="${attend.user.nickname}"></span>
                                </div>
                            </td>
                            <td class="solved2" th:if="${contest.type==0}">
                                <span th:if="${attend.solved==0}" style="color:#000;" th:text="${attend.solved}"></span>
                                <span th:if="${attend.solved>0}" style="color:#000;font-weight: bold;" th:text="${attend.solved}"></span>
                            </td>
                            <td class="score" th:if="${contest.type==1}">
                                <span th:if="${attend.score==0}" style="color:#000;" th:text="${attend.score}"></span>
                                <span th:if="${attend.score>0}" style="color:#000;font-weight: bold;" th:text="${attend.score}"></span>
                            </td>
                            <td class="penalty" th:text="${attend.penaltyFriendly}"></td>
                            <td th:each="problem,stat: ${problems}" class="problem view-submit-log" th:contestId="${contest.contest_id}" th:problemId="${problem.num}">
                                <span th:if="${attend.acTimeIntList[stat.index] > 0}">
                                    <b><span style="color:#32CD32">+<span th:if="${attend.wrongSubmits[stat.index]} > 0" th:text="${attend.wrongSubmits[stat.index]}"></span></span></b>
                                    <br/><span style="font-size:10px;" th:text="${attend.acTimeList[stat.index]}"></span>
                                </span>
                                <span th:if="${attend.acTimeIntList[stat.index] == 0 && attend.wrongSubmits[stat.index] > 0}" style="color:grey" >
                                -<span th:text="${attend.wrongSubmits[stat.index]}"></span>
                                </span>
                            </td>
                        </tr>

                    </table>
                </div>
                <div style="margin:6px 12px;font-size:15px;">
                    <div class="left"></div>
                    <div class="right">
                        <a th:if="${pageInfo.hasPreviousPage == true}" th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/' + ${pageInfo.prePage}}" style="color:#000;text-decoration: none;">&larr;</a>
                        <a th:if="${pageInfo.firstPage > 1}" th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/1'}" style="color:#000;text-decoration: none;">1</a>
                        <span th:if="${pageInfo.firstPage > 2}"  >...</span>
                        <span th:each="nav:${pageInfo.navigatepageNums}">
                        <a th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/' + ${nav}}" th:text="${nav}" th:if="${nav == pageInfo.pageNum}" style="font-weight: bold;color:#000;text-decoration: none;"></a>
                        <a th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/' + ${nav}}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}" style="color:#000;text-decoration: none;"></a>
                    </span>
                        <span th:if="${pageInfo.lastPage < pageInfo.pages}" >...</span>
                        <a th:if="${pageInfo.pages > pageInfo.lastPage}" th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/' + ${pageInfo.pages}}" th:text="${pageInfo.pages}" style="color:#000;text-decoration: none;"></a>
                        <a th:if="${pageInfo.hasNextPage == true}" th:href="@{'/contest/' + ${contest.contest_id} + '/standings/page/' + ${pageInfo.nextPage}}" style="color:#000;text-decoration: none;">&rarr;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
    <div th:include="problem/status-pop"></div>
</div>
</body>
</html>
